<html>

<head>
  <title>8-变形</title>
  <style type="text/css">
    canvas {
      border: 1px solid black;
    }

    #typeSelect {
      margin-bottom: 10px;
    }
  </style>
</head>

<body>
  <div>
    <select id="typeSelect">
      <option value="1">translate</option>
      <option value="2">rotete</option>
      <option value="3">scale</option>
      <option value="4">transform</option>
    </select>
  </div>
  <canvas id="tutorial" width="500" height="500"></canvas>
</body>
<script type="text/javascript">
  let canvas = document.getElementById('tutorial');
  // 获得 2d 上下文对象
  let ctx = canvas.getContext("2d");
  function draw(type) {
    ctx.clearRect(0, 0, 500, 500)
    switch (Number(type)) {
      case 1:
        translate()
        break;
      case 2:
        rotete()
        break;
      case 3:
        scale()
        break;
      case 4:
        // 变形矩阵
        transform()
        break;
    }
  }

  draw(1);
  let selector = document.querySelector("#typeSelect")
  selector.addEventListener('change', function () {
    draw(selector.value);
  })

  function translate() {
    ctx.save(); //保存坐原点平移之前的状态
    ctx.translate(100, 100);
    ctx.strokeRect(0, 0, 100, 100)
    ctx.restore(); //  恢复到最初状态，如果恢复不状态的话 这时候的原点在（100， 100）
    ctx.translate(220, 220);
    ctx.fillRect(0, 0, 100, 100)

    // setTransform
    ctx.fillStyle = 'green';
    ctx.setTransform(1, 0, 0, 1, 0, 0); // ???
    ctx.fillRect(0, 0, 10, 10)
  }
  function rotete() {
    // 1:
    ctx.fillStyle = "red";
    ctx.save();

    ctx.translate(100, 100);
    ctx.rotate(Math.PI / 180 * 45);
    ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, 100, 100);
    ctx.restore();

    ctx.save();
    ctx.translate(0, 0);
    ctx.fillRect(0, 0, 50, 50)
    ctx.restore();
    ctx.fillRect(50, 50, 50, 50)

    // // 2:
    // ctx.save();
    // // blue rect
    // ctx.fillStyle = "#0095DD";
    // ctx.fillRect(30, 30, 100, 100);
    // // ctx.rotate((Math.PI / 180));
    // // ctx.rotate((Math.PI / 180) * 25);
    // ctx.rotate((Math.PI / 180) * 45);

    // // grey rect
    // ctx.fillStyle = "#4D4E53";
    // ctx.fillRect(30, 30, 100, 100);
    // ctx.restore();
  }
  function scale() {
    // // 1： !!! 为什么间距会变大

    ctx.fillStyle = 'red';
    ctx.fillRect(1, 10, 10, 10);

    ctx.save();
    ctx.fillStyle = 'green';
    ctx.scale(10, 3);
    ctx.fillRect(1, 10, 10, 10);
    ctx.restore();

    // 2
    // ctx.strokeStyle = 'red'
    // ctx.translate(0, canvas.height);
    // ctx.scale(1, -1)
    // ctx.strokeRect(0, canvas.height-4, 4, 4)

  }
  function transform() {
    ctx.transform(1, 1, 0, 1, 0, 0);
    console.log(1, ctx.getTransform())
    ctx.fillRect(0, 0, 100, 100);
  }
</script>

</html>